<template>
    <view class="blood-container">
        <CmsTabs :type="10" :page-title="'爱心捐款'" @project-tab-change="handleProjectTabChange" @data-loaded="handleDataLoaded">
            <view class="footer-btn">
                <view class="primary-btn" @click="handleGoBlood">在线捐款</view>
            </view>
        </CmsTabs>
    </view>
</template>

<script setup>
import { ref } from 'vue'
import CmsTabs from '@/components/cms-tabs/cms-tabs.vue'

// 处理项目tab切换
const handleProjectTabChange = (tabData) => {
    console.log('项目tab切换:', tabData)
}

// 处理数据加载完成
const handleDataLoaded = (data) => {
    console.log('数据加载完成:', data)
}

// 在线捐款
const handleGoBlood = () => {
    // 跳转到指定的小程序
    uni.navigateToMiniProgram({
        shortLink: '#小程序://博爱通/ZyGEOhMVsLbIMUz',
        success: (res) => {
            console.log('跳转小程序成功:', res)
        }
    })
}
</script>

<style lang="scss" scoped>  
    .blood-container {
        width: 100%;
        min-height: 100vh;
        background: #f5f5f5;
        padding-bottom: 140rpx; /* 为固定底部按钮留出空间 */
    }

    .footer-btn{
        position: fixed;
        bottom: 0;
        left: 0;
        width: calc(100% - 48rpx);
        height: 100rpx;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24rpx 24rpx 28rpx 24rpx;
        z-index: 100;
    }
</style>